<template>
    <page>
        <roll class="fit">
            <div class="white-bg">
                <template v-for="item in list">
                    <p class="h44 c6 tc f18">{{item.shopId | shopName}}</p>
                    <table  class="fitw mytable">
                        <colgroup>
                            <col/>
                            <col/>
                            <col/>
                        </colgroup>
                        <thead>
                            <tr>
                                <td></td>
                                <td>会员等级</td>
                                <td>赠送百分比</td>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="item2 in item.value">
                                <td><i class="iconfont icon-chongzhi f22"></i></td>
                                <td>{{item2.groupName}}</td>
                                <td>
                                    <span>{{(item2.value.rate || 0)}}%</span>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </template>
            </div>
            <!--<p class="f13 px12 mt10 text2">您当前会员等级是{{userInfo.groupName}}</p>-->
            <p class="f13 px12 mt10 text2">不同会员等级享受不同充值赠送规则</p>
            <p class="f13 px12 text2 mb20">会员等级规则是根据用户当月所获得积分决定下月会员等级</p>
        </roll>
    </page>
</template>
<script>
  export default {
    data () {
      return {
        list: [],
        form: {}
      }
    },
    computed: {
      userInfo () {
        return this.$store.getters.userInfo
      }
    },
    async created () {
      /*-----stupid backend-- -----*/
      const 会员类型id列表 = (await $g.memberListAsync()).map(x => x.id)
      let {obj} = await this.$get('/admin/payRecord/getAllRecord')
      // 提取门店id
      const 全部门店id = Array.from(new Set(obj.map(x => x.shopId)))

      // 将规则按会员分组
      const parseMemberGroup = arr => $g.memberList.map(x => ({...x, value: arr.find(y => x.id == y.memberGroupId) || {}}))

      /*
      * 将规则按门店
      * 后台发来的数据是混乱的，说不能通过门店分组，哦 shit
      * */
      const 全部门店规则 = 全部门店id.map(shopId => ({
        shopId,
        value: parseMemberGroup(obj.filter(x => x.shopId == shopId))
      }))

      this.list = 全部门店规则
     // console.log(全部门店规则)
    },
    methods: {

    },
    components: {}
  }
</script>
<style type="text/scss" lang="scss" scoped>
    @import '../../css/variable';
    .mytable {
        table-layout: fixed;
        border-top: 1px solid $c6;
        colgroup col{
            &:nth-child(1) {
                width: 60px;
            }
            &:nth-child(2) {
                width: 40%
            }
        }
        thead tr td {
            color: $c6;
        }
        tbody tr {
            color: #646464;
            &:nth-child(odd) {
                background-color: #fef2e9;
            }
            td:first-child {
                text-align: center
            }
        }
        tr td {
            line-height: 40px;
            vertical-align: middle;
        }
    }
</style>
